<!doctype html>
<html ng-app>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <style type="text/css">
        .error {
            background-color: red;
        }

        .warning {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div ng-controller='HeaderController'>

    <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>

    <button ng-click='showError()'>Simulate Error</button>
    <button ng-click='showWarning()'>Simulate Warning</button>
</div>
<script>
    function HeaderController($scope) {
        $scope.isError = false;
        $scope.isWarning = false;

        $scope.showError = function () {
            $scope.messageText = 'This is an error!';
            $scope.isError = true;
            $scope.isWarning = false;
        };

        $scope.showWarning = function () {
            $scope.messageText = 'Just a warning.  Please carry on.';
            $scope.isWarning = true;
            $scope.isError = false;
        };
    }
</script>
</body>
</html>
